<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>你好，总账号</title>
  <script>
    if(/http:/.test(location.href)) location.href = location.href.replace(/http:/, 'https:')
  </script>
  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <script src="__PUBLIC__/script/layer/layer.js"></script>
  <script src="__PUBLIC__/node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
  <script src="__PUBLIC__/script/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
  <link rel="stylesheet" href="__PUBLIC__/style/base.css">
  <link rel="stylesheet" href="__PUBLIC__/script/bootstrap-treeview-master/dist/bootstrap-treeview.min.css">
  <link rel="stylesheet" href="__PUBLIC__/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="__PUBLIC__/style/manage.css">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <header class="col-xs-6 col-md-2 account_name"><img class='img-responsive' src="__PUBLIC__/images/logo_long.jpg" alt=""></header>
      <div class="col-xs-12 col-md-12">
        <div class="row">

          <!-- 左侧栏 -->
          <div class="col-md-2 manage_nav_box">
            <iframe src="{:U('Wxauthorise/nav_1')}?local=qudao_m" frameborder="0" width="100%" style="height:35rem;"></iframe>
            <!-- 账号选项 -->
            <div class="account_option">
              <a href="{:U('index/update_passwd')}" class="pass_mod">修改密码</a>
              <a href="{:U('index/loginout')}" class="sign_out">退出登录</a>
            </div>
            <!-- end 账号选型 -->
          </div>
          <!-- end 左侧栏 -->

          <!-- 右主体  -->
          <div class="col-md-10 col-md-10 messageBox">

            <!-- 账号主体显示 -->
            <!-- <div class="account_name">金融公司名称</div> -->
            <!-- end 账号主体显示 -->


            <!-- begin 筛选区域 -->
            <div class="search_form col-xs-12">
              <div class="seach_text_input_box">
                <form autocomplete="off" action="{:U('Qudao/index')}" style="display:none;" id="hidden_search_form"></form>
                <input type="text" name='search' form="hidden_search_form" placeholder="输入渠道名称进行搜索">
                <input type="submit" value="搜索" form="hidden_search_form" id = 'search_button'>
              </div>
              <div class="tag_search">
                <span class="tag first"><input type="checkbox" name="type" style='display:none;' id='tag_1' form='hidden_search_form' value='5'><label for='tag_1'>全部渠道</label></span>
                <span class="tag"><input type="checkbox" name="type" style='display:none;' id='tag_2' form='hidden_search_form' value='1'><label for='tag_2'>银行</label></span>
                <span class="tag"><input type="checkbox" name="type" style='display:none;' id='tag_3' form='hidden_search_form' value='3'><label for='tag_3'>消费金融</label></span>
                <span class="tag last"><input type="checkbox" name="type" style='display:none;' id='tag_4' form='hidden_search_form' value='4'><label for="tag_4">其他</label></span>
              </div>
            </div>
            <!-- end 筛选区域 -->

            <!-- begin  授权产品列表列表 -->
            <header>所有渠道列表<a href="#" style="display: none"><img id="add_local_frame" src="__PUBLIC__/images/neiye/u138.png" alt="u138" title="添加授权地区"></a></header>
            <!-- end 表头 -->

            <table class="messageBoxContent table table-striped table-bordered" id="main_table">
                <thead>
                  <tr>
                    <th class="authNo">序号</th>
                    <th class="authSheng">省</th>
                    <th class="authShi">市</th>
                    <th class="authQu">区</th>
                    <th class="authDate">加入日期</th>
                    <th class="authQuydaoType">渠道类型</th>
                    <th class="authQudaoName">渠道名称</th>
                    <th class="authPerson">对接人</th>
                    <th class="authPhone">电话</th>
                    <th class="authSetting">多选 <input type="checkbox" name="test" id="fuck" form='not_submit'></th>
                  </tr>
                </thead>
                <tbody>
                  <volist name='list' id='vo'>
                  <tr>
                    <span style="display: none">{$vo.web_id}</span>
                    <th class="authNo">{$key+1}</th>
                    <th class="authSheng">{$vo.web_pro_id|re_data}</th>
                    <th class="authShi">{$vo.web_city_id|re_data}</th>
                    <th class="authQu">{$vo.web_area_id|re_data}</th>
                    <th class="authDate">{$vo.web_time}</th>
                    <th class="authQuydaoType">{$vo.qudao_type}</th>
                    <th class="authQudaoName">{$vo.qudao_name}</th>
                    <th class="authPerson">{$vo.web_name}</th>
                    <th class="authPhone">{$vo.web_phone}</th>
                    <th class="authSetting"><input type="checkbox" name="id_arr[]" id="diqu_2" value="{$vo.web_id}" form="delete_form"></th>
                  </tr>
                  </volist>
                </tbody>
              </table>
            <!-- end 授权产品列表列表 -->

            <!-- begin 删除选项（表单） -->
            <div class="form">
              <form autocomplete="off" action="delete" id="delete_form" method="POST">
                <input type="submit" value="删除所选" class="delete_all">
                <input type="reset" value="取消选择" class="reset_all">
              </form>
            </div>
            <!-- end 删除选项（表单） -->

            <!-- begin 分页 -->
            <div class="authPage">
              <!-- 页面指示器 -->
              <!-- <div class="pages">24/{$count}</div> -->
              <!-- 分页列表 -->
              <!-- <span class="number">...</span> -->
              <div class="pageList">
                {$page}
              </div>
            </div>
            <!-- end 分页 -->

          </div>
          <!-- end 右主体 -->

        </div>
      </div>
    </div>
  </div>
  <script>
    $('#add_local_frame').on('click', function(){
      layer.open({
        type: 2,
        title: 'layer mobile页',
        area: ['320px', '440px'],
        maxmin: true,
        content: "" //iframe的url
      })
    })
    $(document).ready(function() {
      // 表格
      var proList = $('#main_table').DataTable({
        "paging": false,
        "info": false,
        "searching": false
      })
      // 多选
      $('.messageBoxContent thead .authSetting').on('click', function (event) {
        event.stopPropagation();Array.from($('.messageBoxContent input[type=\'checkbox\']')).forEach(function(val,index){val.checked = !val.checked})
      })
      // 还原选项
      const neededCurrent = sessionStorage.getItem('currentQudaoFliter')
      if(neededCurrent !== null) {
        try{
          const neededCurrentArray = JSON.parse(neededCurrent)
          $.each(neededCurrentArray, (index, item) => {
            $(`#${item}`).prop('checked', true).change()
          })
          if (neededCurrentArray.length === 0) {
            $(`.first input`).prop('checked', true).change()
          }
          // 历遍处理样式
          $('.tag_search .active').each((index, item) => {
            $(item).removeClass('active')
          })
          $('.tag_search .tag input:checked').each((index, item) => {
            $(item).closest('span').addClass('active')
          })
        } catch (err) {
          console.log(`回填选项失败`)
        }
      } else {
        $(`.first input`).prop('checked', true)
        $(`.first input`).change()
        // 历遍处理样式
        $('.tag_search .active').each((index, item) => {
          $(item).removeClass('active')
        })
        $('.tag_search .tag input:checked').each((index, item) => {
          $(item).closest('span').addClass('active')
        })
      }
      // 标签单选与多选
      $('.tag_search .tag input').on('change', function () {
        if($(this).parent().hasClass('first') && $(this).prop('checked') === true) {
          $(this).parent().nextAll('span').children('input').each(function (index, _this) {
            $(_this).prop('checked', false)
          })
        } else if($(this).parent().hasClass('first') && $(this).prop('checked') === false) {
          $('.tag_search .tag input:checked').length === 0 ? $(this).prop('checked', true) : void( _ => {})
        } else if(!$(this).parent().hasClass('first') && $(this).prop('checked') === true) {
          $('.tag_search .tag.first input').prop('checked', false)
        } else if(!$(this).parent().hasClass('first') && $(this).prop('checked') === false) {
          $('.tag_search .tag input:checked').length === 0 ? $('.tag_search .tag.first input').prop('checked', true) : void( _ => {})
        }
        // 历遍处理一下样式
        $('.tag_search .active').each((index, item) => {
          $(item).removeClass('active')
        })
        const checkedArray = []
        $('.tag_search .tag input:checked').each((index, item) => {
          $(item).closest('span').addClass('active')
          checkedArray.push($(item).attr('id'))
        })
        sessionStorage.setItem('currentQudaoFliter', JSON.stringify(checkedArray))
      })
    })
    // 跳转
    window.addEventListener('message', fromNav, false)
    function fromNav(event) {
      console.log(event.data.url)
      if (event.data.url.length && event.data.url.length > 1) {
        self.location = event.data.url
      }
    }
    // 提交前处理
    $('#search_button').on('click', (evt) => {
      evt.preventDefault()
      let typeArray = []
      $(`input[name='type']:checked`).each((index, item) => {
        typeArray.push(`${$(item).val()}`)
        $(item).remove()
      })
      $('body').append(`<input type="hidden" name="type" style='display:none;' form='hidden_search_form' value='${typeArray.join(',')}'>`)
      $(`#hidden_search_form`).submit()
    })
  </script>
</body>
</html>
